import React from 'react'
import { Table,Space,Button } from 'antd'
import {DeleteOutlined,EditOutlined} from '@ant-design/icons'
export default function TableTest() {
    const columns = [
        {
            title: '序号',
            // 指定渲染数据源中的哪个字段
            dataIndex:'id'
        },
        {
            title: '事项',
            dataIndex:'title'
        },
        {
            title: '是否已完成',
            dataIndex:'isDone',
            /**render 自定义渲染内容 */
            /**
             * 
             * @param value 当没有配置 dataIndex的时候，value就是row，配置了dataIndex value就是当前条记录 dataIndex 字段的值
             * @param row 当前条记录的行对象
             * @param index  索引
             * @returns 
             */
            render(value:any,row:any,index:any){
                console.log('value: ', value);
                console.log('row: ', row);
                console.log('index: ', index);
                return value ? '已完成' : '未完成'
            }
            // render(isDone:any){
            //     return isDone ? '已完成' : '未完成'
            // }
        },
        {
            title: '操作',
            render(row:any){
                return (
                    <Space>
                        <Button type='primary' danger icon={<DeleteOutlined />}></Button>
                        <Button type='primary' icon={<EditOutlined />}></Button>
                    </Space>
                )
            }
        }
    ]

    const todos = [
        {
            id: 1,
            title: '吃饭',
            isDone: true
        },
        {
            id: 2,
            title: '睡觉',
            isDone: true
        },
        {
            id: 3,
            title: '玩游戏',
            isDone: false
        }
    ]
    return (
        <div>
            <Table
                /**指定遍历的 key 唯一不重复 一般用id 也可以用 index */
                rowKey={'id'}
                /**dataSource 指定表格渲染的数据源 */
                dataSource={todos}
                /** 列的列名，及渲染数据源里面的哪个字段 */
                columns={columns}
            />
        </div>
    )
}
